<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="邀请好友"
             :white="false">
    </top-bar>
    <page-content>
      <div class="share-h">
        <div class="share-box" ref="share">
          <div class="share-bottom">
            <div class="share-info">
              <img :src="share.user_head"
                   alt=""
                   class="share-tx">
              <div class="share-w">
                <p class="shaer-name">矿友 {{share.nickname}}</p>
                <p class="share-code">邀请码：{{share.invitation_code}}</p>
              </div>
            </div>
            <div>
              <img :src="share.qrcode"
                   alt=""
                   class="share-er">
            </div>
          </div>
        </div>
      </div>
      <div class="share-btn">
        <van-button round
                    class="share-bt"
                    type="info" @click="downFile">保存并分享</van-button>
      </div>
    </page-content>
  </page-view>
</template>
<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import html2canvas from 'html2canvas';

import service from '@/utils/request';
import { Dialog, Toast } from 'vant';
export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  name: 'share',
  data () {
    return {
      share: {},
    }
  },
  created () {
    this.getShare()
  },
  mounted () {
    NApp.AddJsAPI('saveImgForBase64Done', this.saveOK);
    NApp.AddJsAPI('saveImgForBase64Fail', this.saveEror);
  },
  destroyed(){
    NApp.AddJsAPI('saveImgForBase64Done', this.saveOK)
    NApp.AddJsAPI('saveImgForBase64Fail', this.saveEror)
  },
  methods: {
    imageUrlToBase64(img, type) {
      // 一定要设置为let，不然图片不显示
      let image = new Image();
      // 解决跨域问题
      image.setAttribute('crossOrigin', 'anonymous');
      let imageUrl = img;
      image.src = imageUrl;
      // image.onload为异步加载
      image.onload = () => {
        this.getImage(image, type);
      };
    },
    getImage(image, type) {
      let canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      let context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, image.width, image.height);
      let quality = 1;
      // 这里的dataurl就是base64类型
      let dataURL = canvas.toDataURL('image/jpeg', quality);
      if(type == 1){
        this.share.user_head = dataURL;
      }else{
        this.share.qrcode = dataURL;
      }
    },
    saveOK(){
      Dialog.alert({
        title: '保存成功',
        message: '请前往相册查看！',
        confirmButtonColor: '#585DF9',
      })
    },
    saveEror(){
      Dialog.alert({
        title: '提示',
        message: '保存失败，请检查权限！',
        confirmButtonColor: '#585DF9',
      })
    },
    downFile () {
      html2canvas(this.$refs.share).then(canvas => {
        let base64 = canvas.toDataURL("image/jpeg", 1);
        debugger;
        NBase.saveImgForBase64(base64)
      });
    },
    getShare () {
      return service.post('/apiGetInvitation.do').then(res => {
        console.log(res, 'apiGetInvitation')
        this.share = res.data;
        this.imageUrlToBase64(this.share.user_head, 1)
        this.imageUrlToBase64(this.share.qrcode);
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.share-h {
  padding: 16px 20px;
  height: 613px;
  margin-top: 70px;

  .share-box {
    height: 613px;
    background: url('../../assets/image/login/i_kp.png') center / contain no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
    .share-bottom {
      padding: 0 20px;
      box-sizing: border-box;
      height: 96px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 10px;
      display: flex;
      justify-content: space-between;
      .share-info {
        margin-top: 15px;
        height: 96px;
      }
      .share-er {
        width: 90px;
        height: 90px;
      }
      .share-tx {
        width: 66px;
        height: 66px;
        // margin-top: 15px;
        margin-right: 16px;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
      }
      .share-w {
        vertical-align: middle;
        display: inline-block;
      }
      .shaer-name {
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
      }
      .share-code {
        height: 14px;
        font-size: 10px;
        margin-top: 4px;
        font-weight: 400;
        color: #aaa8b5;
      }
    }
  }
}
.share-btn {
  height: 70px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  .share-bt {
    width: 335px;
    height: 57px;
    background: #585df9;
    border-radius: 29px;
    text-align: center;
  }
}
</style>
